<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>直播界面</title>
		<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
		<link rel="stylesheet" type="text/css" href="http://www.joyue-tech.com/szptApp/html/css/common/common.css"/>
		<link rel="stylesheet" type="text/css" href="http://www.joyue-tech.com/szptApp/html/css/broadcast.css"/>
		<!--<script type="text/javascript" charset="utf-8" src="http://yuntv.letv.com/player/live/blive.js"></script>-->
		<style type="text/css">
			#danmu1{
				width: 100%;
				height: 100%;
				position: absolute;
				margin: 0;
				/*z-index: 0;*/
				background: none;
				overflow: hidden;
				display: none;
			}
			#danmu{
				width: 100%;
				height: 100%;
				position: absolute;
				margin: 0;
				/*z-index: 0;*/
				background: none;
				overflow: hidden;
				display: none;
			}
			#btn2{
				height: 35px;
				font-size: 20px;
				display: block;
				border: none;
				background: #f60;
				color: #fff;
				float: left;
				margin-top: 0px;
				border-radius: 5px;
			}
			#btn1{
				font-size: 14px;
				display: block;
				border: none;
				background: #f60;
				color: #fff;
				float: left;
				margin-top: 7px;
				margin-left: 5px;
				border-radius: 5px;
			}
			.send_cont1{
				width:75%;
				height: 35px;
				float: left;
				padding: 0 0 0 10px;
			}
		</style>
	</head>
	<body>
	<div id="player" style="width:100%;height:200px;position: absolute;top: 0;">
		<div id="danmu1"></div>
		<div id="danmu"></div>
		<script type="text/javascript" charset="utf-8" src="http://yuntv.letv.com/player/live/blive.js"></script>
		<script type="text/javascript">
//				var abc = localStorage.getItem("activityId");
//				var abc = "A20170829000004p";
				var player = new CloudLivePlayer();
        		player.init({activityId:"A20170912000008a"});
//        		console.log(abc);
		</script>
	</div>
   <div id="broadcast">
   			<div class="live_top">
   			</div>
			<div class="live">
				<div>
					<a id="btn1" href="http://www.joyue-tech.com/szptApp/html/qcode.html">+关注</a>
				</div>
				<div>
					<mt-switch class="buff" @change="trun" v-model="value">弹幕</mt-switch>
				</div>
			</div>
	   <div class="live">
		   <input v-model="content" class="send_cont1" type="text" placeholder="在这里输入弹幕！"/>
		   <button id="btn2" @click="Http()">发送</button>
	   </div>
			<div class="broadcast">
				<h3>{{title}}</h3>
				<h4>{{time}}</h4>
				<h5>直播简介</h5>
				<p>{{introduce}}</p>
				<h5>为你推荐</h5>
				<ul>
					<li  v-for="data in item" @click="Goto(data.activityId,data.activityName)"><a><img src="http://pltop.cn//zb_users/theme/baobk/style/random/30.jpg"/></a><p class="p_p">{{data.activityName}}</p></li>
				</ul>
			</div>
		</div>
		<script src="http://www.joyue-tech.com/szptApp/html/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
		<script src="http://www.joyue-tech.com/szptApp/html/js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://www.joyue-tech.com/szptApp/html/js/common/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://www.joyue-tech.com/szptApp/html/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
			var vm = new Vue({
		        el: '#broadcast',
		        data:{
		        	value:false,
		        	title:'',
		        	time:'',
		        	introduce:'',
		        	name:'admin',
		        	content:'',
		        	activityId:'',
		        	text:'',
		        	item:[],
					timer1:''
		        },
				created:function(){
//					var _self = this;
//					var code = _self.getUrlParam("code");
//					if(code == undefined ){
////						alert("请先关注公众号！");
//						location.href = "http://www.joyue-tech.com/szptApp/test.jsp";
//					}else{
//						var url ="http://www.joyue-tech.com/szptApp/a/zhtj/wxxx/grantAuth?code=" + code;
//						_self.$http.get(url).then(function(res){
//							console.log(res);
//							if(res.status == 200){
//								if(res.body.status == 1){
//									console.log("未关注公众号！");
//									location.href = "http://www.joyue-tech.com/szptApp/test.jsp";
//								}
//							}
//						})
//					}
				},
		        mounted:function(){
		        	var _self = this;
		        	var id= "A20170912000008a";
//					var id= localStorage.getItem("activityId");
		        	console.log(name)
		        	var url = server_url + "a/zhtj/zbxx/getAppId?activityId=" + id;
		        	this.$http.post(url).then(function(res){
//		        		console.log(res.body.data.list.activityName);
						console.log(res);
						console.log(res.body.data.rows[0].activityName)
		        		if(res.status == 200){
		        			_self.time = res.body.data.sjd;
		        			_self.title = res.body.data.rows.activityName;
		        			if(res.body.data.rows.description == undefined){
		        				_self.introduce = "暂无直播详情！";
		        			}else{
		        				_self.introduce = res.body.data.rows.description;
		        			}
//		        			_self.title = res.body.data.list.activityName;
//		        			_self.introduce = res.body.data[1].rows.description;
		        		}
		        	});
		        	
		        	var url1 =  server_url + "a/zhtj/zbxx/getPartInfo";
		        	console.log(url1)
		        	_self.$http.post(url1).then(function(res){
		        		console.log(res);
		        		console.log(res.body.data.rows);
		        		if(res.status == 200){
		        			_self.item = res.body.data.rows;
		        		}
		        	})
		        	
		        	
		        },
		        methods: {
		        	trun:function(){
		        		var _self = this;
		        		if(_self.value == false){
		        			_self.$toast( '关闭');
		        			console.log("1")
		        			$("#danmu").hide();
		        			$("#danmu1").hide();
		        		//	clearInterval(_self.timer1);
		        		}else {
		        			_self.$toast( '打开');
//		        			console.log("2")
//		        			$("#danmu").show();
//		        			$("#danmu1").show();
//		        			_self.timer1 = setInterval(function(){
//		        				_self.Http1();
//		        			},2000);
		        		}
		        	},
					getUrlParam:function(name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
						var r = window.location.search.substr(1).match(reg);  //匹配目标参数
						if (r != null) return unescape(r[2]); return null; //返回参数值
					},
		            prev: function () {
		              
		            },
		            next: function () {
		               
		            },
		            all:function(){
		            	this.$toast( '全屏');
		            },
		            send:function(){
		            	this.$toast('发送弹幕！')
		            },
		            Goto: function(id,name) {
						location.href = "http://www.joyue-tech.com/szptApp/html/broaadcast.html";
					},
		            Http1:function(){
		            	var _self = this;
//		            	console.log(_self.content)
//		            	var url = server_url+"a/zhtj/dmxx/getDmInfo";
//		            	_self.$http.post(url).then(function(res){
//		            		if(res.status == 200){
//		            			if(res.body.data == undefined){
//		            				console.log("暂无弹幕！")
//		            			}else{
//		            				console.log(res);
//		            			console.log(res.body.data)
//		            			var data = res.body.data;
//			            		console.log(data);
//			            		if(parseInt($("#danmu").height()) > 200 || parseInt($("#danmu1").height()) >200){
//				            		for (var i = 0;i < data.length;i++) {
//				            			_self.content = data[i].nr;
//				            			_self.danmu1(_self.content);
//				            			_self.content = '';
//				            		}
//			            		}else{
//			            			for (var i = 0;i < data.length;i++) {
//				            			_self.content = data[i].nr;
//				            			_self.danmu(_self.content);
//				            			_self.content = '';
//				            		}
//			            		}
//		            			}
//		            		}
//		            	});
		            },
		            Http:function(){
		            	var _self = this;
//		            	$("#btn").attr('disabled',"true");
//		            	console.log(_self.content)
//		            	var url = server_url+"a/zhtj/dmxx/getDmInfo?nr=" + _self.content;
//		            	_self.$http.post(url).then(function(res){
//		            		console.log(res);
//		            		if(res.status == 200){
//		            			var data = res.body.data;
//			            		console.log(data[0].nr);
//			            		if(parseInt($("#danmu").height()) > 200 || parseInt($("#danmu1").height()) >200){
//				            		for (var i = 0;i < data.length;i++) {
//				            			_self.content = data[i].nr;
//				            			_self.danmu1(_self.content);
//				            			_self.content = '';
//				            		}
//			            		}else{
//			            			for (var i = 0;i < data.length;i++) {
//				            			_self.content = data[i].nr;
//				            			_self.danmu(_self.content);
//				            			_self.content = '';
//				            		}
//			            		}
//			            		setTimeout(function(){
//						            $("#btn").removeAttr("disabled");
//						        },9000)
//		            		}
//		            	});
		            },
		            danmu1:function(text){
		            	var $p = $('<p>' + text + '</p>');
					var x = 0;
					var h = Math.random() * (parseInt($('#danmu1').css('width'))-40);
					var num = Math.random() * 1.5;
					//控制颜色随机
					var r = parseInt(Math.random() * (255 + 1));
					var g = parseInt(Math.random() * (255 + 1));
					var b = parseInt(Math.random() * (255 + 1));
					var timer = setInterval(function() {
						//此条件判断语句用控制每次打开弹幕时弹幕都是从最右边开始出现
						if($('#danmu1').css("display") !== "none") {
							x += num > 0.5 ? num : num + 0.5;
						} else {
							x = 0;
						}
						$p.css({
							"white-space": "nowrap",
							"font-weight": "bold",
							"font-size": "24px",
							"position": "absolute",
							"margin":"0",
							"left": h,
							"color": "rgb(" + r + "," + g + "," + b + ")",
							"top": 500 - x,
							"transform": "rotate(90deg)",
							"z-index":"9"
						});
						$('#danmu1').append($p);
							if(parseInt($p.css("top")) < -parseInt($p.height())) {
								$p.remove();
								clearInterval(timer);
								timer = null;
							}
							}, 1);
				        },
				        danmu:function(text){
				        	var $p = $('<p>' + text + '</p>');
							var x = 0;
							var h = Math.random() * (parseInt($('#danmu').css('height')) - 54);
							var num = Math.random() * 1.5;
							//控制颜色随机
							var r = parseInt(Math.random() * (255 + 1));
							var g = parseInt(Math.random() * (255 + 1));
							var b = parseInt(Math.random() * (255 + 1));
							var timer = setInterval(function() {
								//此条件判断语句用控制每次打开弹幕时弹幕都是从最右边开始出现
								if($('#danmu').css("display") !== "none") {
									x += num > 0.5 ? num : num + 0.5;
								} else {
									x = 0;
								}
								$p.css({
									"white-space": "nowrap",
									"font-weight": "bold",
									"font-size": "24px",
									"position": "absolute",
									"top": h,
									"color": "rgb(" + r + "," + g + "," + b + ")",
									"left": 500 - x,
									"z-index":"9"
								});
								$('#danmu').append($p);
								if(parseInt($p.css("left")) < -parseInt($p.width())) {
									$p.remove();
									clearInterval(timer);
									timer = null;
								}
							}, 1);
				        }
				    }
				});
//  	var timer = setInterval(function(){
//  		var h = parseInt($("#player").height());
//  		console.log(h)
//  		if(h > 200){
//  			clearInterval(timer)
//  		}
//  	},100)
    	
    	
//  	$(function() {
//				var h = parseInt($("#player").height());
//				$("#player").click(function() {
//							
//				if(parseInt($("#player").height()) == 200){
//		    		timer = setInterval(function(){
//		    		var h = parseInt($("#player").height());
//		    		console.log(h)
//		    		if(h > 200){
//		    			$("#id").animate({height:h}, {step: function(){
//						console.log(parseInt($(this).height()));
//						if(parseInt($(this).height()) > h-10){
//							console.log("高度变化了")
//						}
//					}}).resize(function() {
//      			console.log($(this).height());
//					//console.log($(this).height());
//					})
//		    			clearInterval(timer)
//		    		}
//		    	},100)
//		    	}
//					
//					
//				});
//			})
    	
    </script>
	<!--</div>-->
	</body>
</html>
